<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button @click="search" round icon="search" type="info">
          搜索
        </van-button>
      </template>
    </van-nav-bar>
    <!-- tab标签栏 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in ownChannels" :key="item.id" :title="item.name">
        <!-- 列表内容 -->
        <List class="lists" :channel_id="item.id"></List>
      </van-tab>
      <div class="icon-wrap">
        <van-icon name="wap-nav" @click="showchannel = true" />
      </div>
    </van-tabs>
    <!-- 下面的弹出内容 频道管理 -->
    <!-- @input="active = $event" -->
    <!-- :value="active" -->
    <van-action-sheet v-model="showchannel" title="标题">
      <show-channel
        v-model="active"
        :ownChannels="ownChannels"
        @close="showchannel = false"
        @fix="active--"
      ></show-channel>
    </van-action-sheet>
  </div>
</template>

<script>
import { ownChannelAPI } from '@/Api/index'
import List from './list.vue'
import ShowChannel from './channelEdit.vue'
export default {
  components: {
    List,
    ShowChannel
  },
  data () {
    return {
      ownChannels: [],
      showchannel: false,
      active: 0
    }
  },
  methods: {
    search () {
      this.$router.push('/search')
    }
  },
  async created () {
    // 获取到本地存储中的数据
    let resloc = JSON.parse(window.localStorage.getItem('HMTT81_CHANNELS'))
    // 如果来到首页,已经登录了,或者本地数据不存在就发送请求
    if (this.$store.state.tokenobj.token || !resloc) {
      let res1 = await ownChannelAPI()
      this.ownChannels = res1.data.data.channels
    } else {
      // 来到这里说明是,没有登录,本地数据也不为空,那就获取本地的数据
      this.ownChannels = resloc
    }
  }
}
</script>

<style lang="less">
.lists {
  width: 100%;
  position: fixed;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
.van-nav-bar {
  .logo {
    width: 120px;
    height: 100%;
    /* // 在脚手架5以前，也就是比如脚手架4的版本
    // 问题在于在样式中无法用 @ 代表src
    // 因为@在less中有特殊含义，所以在css里要用@代表src
    // 前面要加 ~@
    // 所以如果版本是脚手架4，那这里就要改成 url(~@/assets/logo.png) */
    background: url(@/assets/logo.png) no-repeat center / contain;
  }
  .van-button {
    width: 100px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
  }
}
.van-tabs {
  ::v-deep .van-tabs__wrap {
    width: 340px;
  }

  .icon-wrap {
    position: absolute;
    right: 0;
    top: 0;
    width: 35px;
    height: 35px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .van-icon {
      font-size: 30px;
    }
  }
}
</style>
